<template>
  <div class="mine">
    <Header></Header>
    <!-- <div style="height:100px ;"></div> -->
    <div class="contentBox">
      <div class="title">
        <!-- {{ $t('assemble.积分商城') }} -->
      </div>
      <div class="productbox">

        <div class="searchBox">
          <input class="searchinput" v-model="searchValue" type="text" placeholder="关键词搜索(Keyword search)">
          <div class="searchBtn" @click="getgoodsList">
            {{ $t('assemble.搜索') }}
          </div>
        </div>



        <div class="dataBox">
          <div class="itembox" v-for="(item, index) in goodsData">
            <img :src="item.img" alt="" @click="handleDuihuanProduct(item.id)">
            <p>{{ item.name }}</p>
          </div>
        </div>


        <!-- <div class="fenye">
          <el-pagination background layout="prev, pager, next" :page-size="this.pageInfo.pageSize"
            :page-sizes="[5, 10, 15, 20]" :total="pageInfo.total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
          </el-pagination>
        </div> -->

      </div>
    </div>
    <div class="probox">
      <el-dialog :visible.sync="duihuanFlag" width="34%" center :show-close="false">
        <div class="productDetailBox">
          <div class="title" style="width:230px">
            {{ $t('assemble.兑换商品') }}
          </div>
          <div class="productDetail">
            <img :src="detailData.img" alt="">
            <div class="desc">
              <div class="titles">{{ detailData.name}}</div>

              <div>
                <span style="margin-right: 30px;">  {{ $t('assemble.类型') }}</span>
                <el-radio v-model="type" label="1">  {{ $t('assemble.积分') }}</el-radio>
                <el-radio v-model="type" label="2">  {{ $t('assemble.代金券') }}</el-radio>
              </div>

              <el-select v-if="type == 2" v-model="couponId" placeholder="请选择代金券(Please select a voucher)" @change="handlecoupon">
                <el-option v-for="(item, index) in couponList" :key="item.id" :label="item.coupon_price.name"
                  :value="item.id">
                </el-option>
              </el-select>

              <el-select v-else v-model="couponId" disabled placeholder="请选择代金券(Please select a voucher)">
                <el-option v-for="(item, index) in couponList" :key="index" :label="item.coupon_price.label"
                  :value="item.coupon_price.name">
                </el-option>
              </el-select>


              <div>

              </div>
            </div>


          </div>

          <div class="price">
            <div><span class="duihuanjiage">{{ $t('assemble.兑换价格') }}</span><span class="pricenum">{{ detailData.price }}</span></div>
            <div class="shengyujine"><span style="margin-right: 10px;">{{ $t('assemble.剩余金额') }}</span><span>{{ money }}</span></div>
          </div>


          <div class="btnbox">
            <div class="btn lijiduihuan" @click="handleLijiduihuan">{{ $t('assemble.立即兑换') }}</div>
            <div class="btn close" @click="duihuanFlag = false">{{ $t('assemble.取消') }}</div>
          </div>
        </div>

      </el-dialog>
    </div>


    <div class="probox">
      <el-dialog :visible.sync="dialogVisible" width="35%" :show-close="false">
        <div class="text">
          <span>{{ $t('assemble.兑换成功') }}</span>
        </div>
      </el-dialog>
    </div>


  </div>
</template>
<script>
import Header from '@/components/header/index.vue'
import { goodsList, goodsDetail, userOwn, orderPay, mycouponstatus } from "@/utils/api.js"
export default {
  components: {
    Header,
  },
  data() {
    return {
      type: "1",
      couponId: null,
      duihuanFlag: false,
      dialogVisible: false,
      searchValue: "",
      goodsData: [],
      detailData: {},
      money: "",
      couponList: [],
      goods_id: "",
      coupon_id: "",
      coupon_my_id: "",
      pageInfo: {
        total: 0,
        page: 1,
        pageSize: 5
      },
    }
  },
  created() {
    this.getgoodsList()
    this.getuserOwn()
    this.getmycouponstatus()
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageInfo.page = val
      this.getgoodsList()
    },
    async getuserOwn() {
      let res = await userOwn({
        token: localStorage.getItem("token")
      })
      console.log("用户信息", res)
      this.money = res.data.money
    },
    async getmycouponstatus() {
      let res = await mycouponstatus({
        token: localStorage.getItem("token")
      })
      console.log("未使用的代金券", res)
      this.couponList = res.data
    },
    async getgoodsList() {
      let res = await goodsList({
        name:this.searchValue
      })
      if (res.code == 1000) {
        console.log("商品列表", res)
        this.goodsData = res.data

      }
    },
    handlemine() {
      this.type = 'mine'
      this.$router.push({ path: '/mine' })
    },

    async handleDuihuanProduct(id) {
      this.goods_id = id
      let res = await goodsDetail({
        id: id
      })
      console.log("商品详情", res)
      this.detailData = res.data
      this.duihuanFlag = true
    },

    handlecoupon(e) {
      // console.log("eee", this.couponId)
      console.log("eee", e)
      this.couponList.forEach((item, index) => {
        if (item.id == e) {
          this.coupon_id = item.coupon_price.id
          this.coupon_my_id = item.id
        }
      })
    },
    async handleLijiduihuan() {
      let data = {}
      if (this.type == "1") {
        data = {
          type: this.type,
          token: localStorage.getItem('token'),
          goods_id: this.goods_id,
        }
      } else {
        data = {
          type: this.type,
          token: localStorage.getItem('token'),
          goods_id: this.goods_id,
          coupon_id: this.coupon_id,
          coupon_my_id: this.coupon_my_id
        }
      }

      console.log("data", data)
      //  return
      let res = await orderPay(data)
      if (res.code == 1000) {
        this.dialogVisible = true
        this.duihuanFlag = false

        let that = this
        setTimeout(() => {
         location.reload() 
        }, 2500)
      } else {
        this.$message({
          message: res.message,
          type: 'warning'
        });
      }
    },
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-radio__input.is-checked .el-radio__inner {
  background-color: #0057A7;
  background: #0057A7;
}

::v-deep .el-radio__input.is-checked+.el-radio__label {
  color: #0057A7;
}

.text {
  width: 475px;
  height: 135px;
  background: #FFFFFF;
  border-radius: 15px 15px 15px 15px;
  opacity: 1;
  font-size: 15px;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 18px;
  text-align: center;
  padding-top: 45px;
  box-sizing: border-box;
}

.productDetailBox {
  width: 475px;
  // height: 460px
  background: #FFFFFF;
  border-radius: 15px 15px 15px 15px;
  opacity: 1;
  padding-top: 30px;
  box-sizing: border-box;
  padding-bottom: 30px;

}

.title {
  // width: 80px;
  height: 21px;
  font-size: 15px;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 18px;
  margin: 0 auto;
  margin-bottom: 30px;
}
// .duiahuntitle {
//   width: 80px;
//   height: 28px;
//   font-size: 20px;
//   font-family: PingFang SC-Bold, PingFang SC;
//   font-weight: bold;
//   color: #333333;
//   line-height: 23px;
//   margin: 0 auto;
//   margin-bottom: 30px;
// }

.probox {
  ::v-deep .el-dialog {
    background: transparent !important;
    box-shadow: none;
  }

}

.price {

  width: 375px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30px auto;

  .duihuanjiage {
    display: inline-block;
    // width: 64px;
    height: 18px;
    font-size: 11px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 14px;
  }

  .pricenum {
    font-size: 19px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #D32526;
    line-height: 23px;
    margin-left: 10px;
  }

  .shengyujine {
    font-size: 11px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 14px;
  }
}

.productDetail {
  width: 446px;
  height: 143px;
  background: #F7F8FA;
  border-radius: 10px 10px 10px 10px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;

  img {
    width: 134px;
    height: 114px;
    border-radius: 15px 15px 15px 15px;
  }

  .desc {
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .titles {
      width: 222px;
      // height: 50px;
      font-size: 13px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #333333;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      // line-height: 21px;
    }


  }

}

.btnbox {
  width: 324px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  margin-top: 20px;

  .btn {
    width: 132px;
    height: 50px;
    border-radius: 10px 10px 10px 10px;
    font-size: 18px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
  }

  .lijiduihuan {
    background: #0057A7;
    color: #ffffff;
  }

  .close {
    border: 1px solid #CCCCCC;
    color: black;
  }
}

.mine {
  width: 100%;
  // margin: 0 auto;


  .contentBox {
    width: 1920px;
    margin: 0 auto;
    padding-top: 30px;

    .title {
      // width: 80px;
      height: 28px;
      font-size: 20px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #0057A7;
      line-height: 23px;
      margin-left: 269px;

    }

    .productbox {
      width: 1120px;
      padding-bottom: 164px;
      margin: 0 auto;
      margin-top: 66px;

      .searchBox {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .searchinput {
          width: 936px;
          height: 50px;
          background: #F7F8FA;
          border-radius: 10px 10px 10px 10px;
          opacity: 1;
          border: none;
          text-indent: 20px;
          outline: none;

        }

        .searchBtn {
          width: 164px;
          height: 50px;
          background: #0057A7;
          border-radius: 10px 10px 10px 10px;
          opacity: 1;
          border: 1px solid #0057A7;
          font-size: 18px;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #FFFFFF;
          line-height: 50px;
          text-align: center;
          cursor: pointer;
        }
      }

      .dataBox {
        margin-top: 40px;
        width: 100%;
        display: flex;
        // justify-content: space-between;
        // flex-wrap: wrap;
        // overflow: auto;

        .itembox {
          width: 360px;
          margin-right: 10px;

          img {
            width: 360px;
            height: 220px;
            border-radius: 10px 10px 10px 10px;
            cursor: pointer;
          }

          p {
            width: 360px;
            text-align: center;
            font-size: 18px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #000000;
            line-height: 21px;

          }
        }
      }

    }
  }
}

.fenye {
  margin-top: 50px;
  float: right;

  ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #0057A7;
  }
}
</style>